const boxes = document.querySelectorAll(".box");

window.addEventListener('scroll', checkBoxes);

checkBoxes();

function checkBoxes() {
  // window.innerHeight 浏览器窗口的视口 viewport
  const triggerBottom = window.innerHeight / 5 * 4;

  boxes.forEach(box => {
    // Element.getBoundingClientRect() 返回元素的 DOMRect 对象
    // 包含整个元素的最小矩形， 提供元素大小及相对于视口的位置
    // 包含只读属性: 
    // top, right, bottom, top(相对于视口 viewport); 
    // width, height(标准盒模型其各包含边距，怪异盒模型时则与内容相等)
    const boxTop = box.getBoundingClientRect().top;
    if (boxTop < triggerBottom) {
      box.classList.add("show");
    } else {
      box.classList.remove("show");
    }
  })
}